<script setup>
import { useRouter } from 'vue-router';
import { useCartStore } from '../../../stores/cart';
import { useAddressStore } from '../../../stores/address';
import { showConfirmDialog } from 'vant';
import { showToast } from 'vant';


const cartStore = useCartStore()
const addressStore = useAddressStore()
const router = useRouter()
const onAdd = () => {
    router.push('/address')
}

// 当count为0时  删除
const del = (id,count) => {
    if(count === 1) {
        showConfirmDialog({
            title: '提示',
            message:'你确定要删除吗？',
        })
        .then(() => {
            cartStore.changeCount(id,-1)
        })
        .catch(() => {
            showToast('取消删除')
        });
    }else{
        cartStore.changeCount(id,-1)
    }

}






</script>

<template>
    <div class="list">
        <!-- 联系人 -->
        <van-contact-card  v-if="addressStore.curAddress" type="edit" :tel="addressStore.curAddress.tel" :name="addressStore.curAddress.name" @click="onAdd" />
        <van-contact-card v-else type="add" @click="onAdd" />
        

        <!-- 购物列表 -->
        <van-card
            v-for="item in cartStore.cartList"
            :key="item.id"
            :num="item.count"
            :price="item.price"
            desc="描述信息"
            :title="item.name"
            :thumb="item.img"
        >
            <template #footer>
                <van-button size="small" @click="del(item.id,item.count)">-</van-button>
                <van-button size="small" type="primary" @click="cartStore.changeCount(item.id,1)">+</van-button>
            </template>
        </van-card>
        <!-- 提交订单 -->
        <van-submit-bar class="bar" :price="(cartStore.total.price)*100" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<style lang="scss" scoped>
.bar{
    bottom: var(--van-tabbar-height);
}
.list {
    padding-bottom: var(--van-tabbar-height);
}
</style>